<template>
  <div class="背景">
    <TchHead :welcome="welcome" :title="title" />
    <div class="内容 课程内容">
      <div class="课程内容一级标题">我的课程</div>
      <div style="width: 100%">
        <div class="课程内容注释">
          <div class="课程内容注释内容">2022年第1学期</div>
        </div>
        <div class="课程列表">
          <div
            class="课程单元"
            v-for="(item, index) in nowCourses"
            :key="index"
            @click="toCourse(index)"
          >
            {{ item.cou_name }}<br /><br />{{ item.cou_time }}
          </div>
          <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
        </div>
      </div>
      <div class="课程内容一级标题 往期">往期课程</div>
      <div style="width: 100%">
        <div class="课程内容注释">
          <div class="课程内容注释内容 往期">2021年第2学期</div>
        </div>
        <div class="课程列表">
          <div
            class="课程单元"
            style="background-color: #595959"
            v-for="(item, index) in lateCourses"
            :key="index"
            @click="$router.push({ path: '/TchWork', query: { id: index } })"
          >
            {{ item.cou_name }}<br /><br />{{ item.cou_time }}
          </div>
          <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TchHead from "@/components/TchHead";
import request from "@/utils/request";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      welcome: "某老师，您好！",
      title: "",
      nowCourses: [],
      lateCourses: [],
    };
  },
  mounted() {
    // 修改顶部欢迎词
    const temp = this.welcome.split("");
    temp[0] = localStorage.getItem("zyh_tch_name")[0];
    this.welcome = temp.join("");
    localStorage.setItem("zyh_welcome",this.welcome);

    // 请求老师课程
    request
      .post("/mentor/seeTchCou.php", { id: localStorage.getItem("zyh_tch_id") })
      .then((res) => {
        if (res.code === "403") {
          this.$router.push("/");
        } else if (res.code !== "200") {
          ElMessage({
            type: "error",
            message: res.msg,
          });
        } else {
          this.nowCourses = res.data;
        }
      });
  },
  components: {
    TchHead,
  },
  methods:{
    toCourse(i){
      localStorage.setItem("zyh_cou_id",this.nowCourses[i].cou_id);
      localStorage.setItem("zyh_cou_name",this.nowCourses[i].cou_name);
      this.$router.push('/TchWork')
    },
  }
};
</script>

<style>
i {
  width: 132px;
  margin: 0 10px;
}
.课程内容 {
  padding: 0 0 0 23px;
}
.课程内容一级标题 {
  margin-top: 23px;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  background-color: #f39cb9;
  font-size: 18px;
  line-height: 20px;
}
.课程内容注释 {
  display: flex;
  justify-content: flex-end;
  padding: 6px 0;
}
.课程内容注释内容 {
  padding: 2px 10px;
  border-radius: 3px 0 0 3px;
  background-color: #ffccc7;
  font-size: 14px;
  line-height: 20px;
}
.课程列表 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 12px;
  border-top: 1px solid #ff5252;
  border-bottom: 1px solid #ff5252;
}
.课程单元 {
  width: 102px;
  margin: 10px;
  text-align: center;
  padding: 15px;
  border-radius: 7px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  background-color: #1e88e5;
  font-size: 16px;
  line-height: 20px;
  color: white;
}
.往期 {
  color: white;
  background-color: #979696;
}
</style>